
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>SpringBoot配置HTTPS安全证书 - 学习卡片</title>
      <style>
        body { font-family: sans-serif; background-color: #f0f8ff; color: #333; display: flex; flex-direction: column; align-items: center; padding: 50px 20px; }
        .header h1 { font-size: 32px; }
        .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; width: 100%; max-width: 1200px; }
        .card-container { perspective: 1200px; cursor: pointer; height: 250px; }
        .card { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.7s; border-radius: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
        .card-container.flipped .card { transform: rotateY(180deg); }
        .card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; flex-direction: column; box-sizing: border-box; border-radius: 16px; background-color: #fff; padding: 24px; }
        .card-back { background-color: #f0fff4; transform: rotateY(180deg); justify-content: space-between; }
        .card-category { font-size: 14px; color: #0052d9; margin-bottom: 8px; font-weight: 500; }
        .card-question { font-size: 20px; font-weight: 500; flex-grow: 1; display: flex; align-items: center; justify-content: center; text-align: center; }
        .card-answer-wrapper { flex-grow: 1; overflow-y: auto; }
        .card-answer { font-size: 15px; line-height: 1.7; }
        .card-footer { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 16px; margin-top: 16px; }
        .card-source { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 12px; margin-top: 12px; }
      </style>
    </head>
    <body>
      <div class="header">
        <h1>SpringBoot配置HTTPS安全证书 - 学习卡片</h1>
      </div>
      <div class="grid-container">
        
    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">理论</div>
          <div class="card-question">SSL协议为网络通信提供了哪三个主要的安全特性？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">理论</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">SSL协议主要提供私密性、完整性和身份验证这三个安全特性。</div>
          </div>
          <div class="card-source">来源: SSL简介</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">机制</div>
          <div class="card-question">SSL协议在结构上是如何分层的？请描述各层的主要作用。</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">机制</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">SSL协议分为两层。下层为SSL记录协议，主要为高层协议提供基本的安全服务，负责数据分块、压缩、计算MAC和加密。上层包含SSL握手协议、SSL密码变化协议和SSL报警协议。</div>
          </div>
          <div class="card-source">来源: SSL协议结构</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">机制</div>
          <div class="card-question">SSL握手协议在建立安全连接过程中的核心功能是什么？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">机制</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">SSL握手协议允许服务器与客户端在应用程序开始传输数据之前，进行互相认证、协商加密算法和密钥。</div>
          </div>
          <div class="card-source">来源: SSL协议结构</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">在Spring Boot应用中配置SSL证书时，需要在`application.properties`中设置哪四个关键属性？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">需要配置的四个关键属性是：`server.ssl.key-store` (证书路径)、`server.ssl.key-store-password` (证书密码)、`server.ssl.keyStoreType` (密钥库类型) 和 `server.ssl.keyAlias` (证书别名)。</div>
          </div>
          <div class="card-source">来源: JDK生成SSL安全证书 -> 2、配置证书</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">特性</div>
          <div class="card-question">使用JDK自带的keytool工具生成的自签名证书在主流浏览器中可能会遇到什么问题？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">特性</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">尽管使用JDK生成证书的方式足够简单，但在Chrome和Edge等主流浏览器上，这种证书仍然会显示为“不安全”。</div>
          </div>
          <div class="card-source">来源: SSL安全证书</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">机制</div>
          <div class="card-question">在Web应用中，为何通常需要将HTTP端口（如80）的访问重定向到HTTPS端口（如8001）？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">机制</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">因为HTTP本身不安全，配置重定向可以确保当用户通过不安全的HTTP端口访问时，能自动跳转到配置好的安全HTTPS端口，从而保障通信安全。</div>
          </div>
          <div class="card-source">来源: JDK生成SSL安全证书 -> 已经配置8001端口了为什么还要配置80</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">理论</div>
          <div class="card-question">SSL协议的上层由哪三个协议组成？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">理论</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">SSL协议的上层由SSL握手协议、SSL密码变化协议和SSL报警协议三个协议组成。</div>
          </div>
          <div class="card-source">来源: SSL协议结构</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">特性</div>
          <div class="card-question">根据文档中的抓包对比图，HTTPS和HTTP在数据传输上有何根本区别？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">特性</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">根本区别在于数据是否加密。通过抓包可以看出，HTTP传输的数据是明文的，内容清晰可见；而HTTPS传输的数据是经过加密的，无法直接读取其内容。</div>
          </div>
          <div class="card-source">来源: HTTP与HTTPS抓包数据对比</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">当在网关中配置HTTPS并遇到报错时，文档中提供了一个什么样的快速解决方法？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">解决方法是，在配置文件中将 `key-alias` 这一行配置删除或注释掉。</div>
          </div>
          <div class="card-source">来源: HTTP与HTTPS抓包数据对比 -> 网关配置HTTPS报错</div>
        </div>
      </div>
    </div>

      </div>
    </body>
    </html>
